<template>
  <div class="container h-p100">
    <div class="box box-ver h-p100">
      <div class="box-f1 of-y-s content">
        <empty :show="list && list.length === 0" :text="' '">
          <div class="tx-c empty-text1">您还没有相关的事项申请单</div>
          <div class="tx-c empty-text2 tc-888">请您在电脑端先发起事项申请</div>
          <div class="tx-c empty-text2 tc-888">微信端暂不支持</div>
        </empty>
        <div v-if="list && list.length > 0" @click="checkItem(index)" v-for="(item, index) in list" :value="item" :key="index" class="item box">
          <div class="checkbox box box-ac">
            <div :class="{'act': item.checked}" class="icon icon-checkbox"></div>
          </div>
          <div class="item-content">
            <div class="num card-linear1 ell">
              {{item.cause}}
            </div>
            <div class="box date">
              申请日期：{{item.billDate.split(' ')[0]}}
            </div>
            <div class="box amount">
              可借款金额：{{ item.loanedAmount ? item.loanedAmount : item.amountBalance }}
            </div>
          </div>
        </div>
      </div>
      <div @click="next()" class="btn-bot">第二步 填写借款单</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { formatDate } from '@/assets/js/filters'
import { getAddDate, getJMByBillNum } from '@/assets/js/common'
import empty from '@/components/empty'
import axios from 'axios'

export default {
  name: 'jiekuanSenQinList',
  components: {
    empty
  },
  data () {
    return {
      list: null,
      actIndex: -1
    }
  },
  computed: {
    ...mapState(['userNum', 'bizAccountBill'])
  },
  mounted () {
    this.getList()
  },
  methods: {
    checkItem (index) {
      this.list.forEach(item => {
        item.checked = false
      })
      this.list[index].checked = true
      this.actIndex = index
    },
    next () {
      this.getDetail(this.list[this.actIndex])
    },
    getList () {
      this.$store.commit('isLoading', true)
      let endDate = formatDate(new Date(), 'yyyy-MM-dd')
      let startDate = getAddDate(endDate, -365)
      console.log(startDate, endDate)
      axios.all([
        // 事项申请单
        axios.get(`${this.$config.api.host}?method=getProjectApprovals&userNum=${this.userNum}&state=[60]&bizDate=${JSON.stringify([startDate, endDate])}`),
        // 费用申请单
        axios.get(`${this.$config.api.host}?method=getOtherExpenseBills&userNum=${this.userNum}&state=[60]&bizDate=${JSON.stringify([startDate, endDate])}`)
      ]).then(axios.spread((res1, res2) => {
        this.$store.commit('isLoading', false)
        let list = [].concat(res1.data.t, res2.data.t)
        list.forEach(item => {
          item.checked = false
        })
        list.sort((a, b) => {
          return (+a.billDate.split(' ')[0].replace(/-/g, '')) < (+b.billDate.split(' ')[0].replace(/-/g, ''))
        })
        this.list = list
        if (this.list.length === 0) {
          this.$tools.openToast({
            msg: '暂无单据',
            duration: 3000
          })
        }
      }))
    },
    getDetail (item) {
      let billNum = item.num
      let JM = getJMByBillNum(billNum)
      let method = JM === 'FS' ? 'getOtherExpenseBillDetails' : 'getProjectApprovalDetails'
      this.$http({
        url: this.$config.api.host,
        data: {
          method,
          billNum
        }
      }).then(res => {
        if (res.code === 200) {
          let entry = JM === 'FS' ? res.OtherExpenseBillEntry[0] : res.entrys[0]
          let relateBillType = JM === 'FS' ? 'OtherExpenseBill' : 'ProjectApproval' // 借款单据类型（费用申请单-OtherExpenseBill、事项申请单-ProjectApproval）
          let limitMoney = item.loanedAmount ? item.loanedAmount : item.amountBalance
          this.$store.commit('bizAccountBill', {
            expenseNum: entry.expenseTypeNum,
            expenseName: entry.expenseTypeName,
            expenseId: entry.expenseTypeId,
            relateBillType,
            limitMoney,
            relateBillNumber: billNum
          })
          this.$router.push({
            path: '/jiekuanStep2'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.content{
  padding-top:.3rem;
  padding-bottom:.2rem;
}
.empty-text1{
  font-size:.36rem;
  color:#333;
  margin-top:.5rem;
}
.empty-text2{
  font-size:.26rem;
  color:#999;
  margin-top:.3rem;
}
.item{
  padding:.15rem .3rem;
  .checkbox{
    width:1.1rem;
  }
  .item-content{
    background-color:#FFF;
    margin-bottom:.25rem;
    color:#333;
    border-radius:.2rem;
    overflow: hidden;
    width:6.2rem;
    .num{
      color:#FFF;
      padding:.2rem .3rem;
      font-size:.36rem;
    }
    .date,.amount{
      margin:0 .3rem;
      padding: .2rem 0;
    }
    .amount{
      padding-top:0;
      padding-bottom:.3rem;
    }
  }
}
.btn-bot{
  @include btn(100%, 1rem, .36rem);
}
</style>
